<script>
import {
  defineComponent,
  reactive,
  toRefs
} from 'vue'
import DirectionButton from './DirectionButton.vue'

export default defineComponent({
  name: 'ConfigControl',
  components: {
    DirectionButton
  },
  props: {
    buttonSize: {
      type: Number,
      default: 40
    },
    splitSize: {
      type: Number,
      default: 12
    }
  },
  setup() {
    const state = reactive({})

    return {
      ...toRefs(state)
    }
  }
})
</script>

<template>
  <div class="component-config-control-container"
       :style="{ width: `${ buttonSize * 3 + splitSize * 2 }px`, height: `${ buttonSize * 3 + splitSize * 2 }px` }">
    <div class="config-control-line" :style="{ height: `${buttonSize}px` }">
      <direction-button :size="buttonSize" direction="left-top" />
      <direction-button :size="buttonSize" direction="top" />
      <direction-button :size="buttonSize" direction="right-top" />
    </div>
    <div class="config-control-line" :style="{ height: `${buttonSize}px` }">
      <direction-button :size="buttonSize" direction="left" />
      <direction-button :size="buttonSize" direction="center" />
      <direction-button :size="buttonSize" direction="right" />
    </div>
    <div class="config-control-line" :style="{ height: `${buttonSize}px` }">
      <direction-button :size="buttonSize" direction="left-bottom" />
      <direction-button :size="buttonSize" direction="bottom" />
      <direction-button :size="buttonSize" direction="right-bottom" />
    </div>
  </div>
</template>

<style lang="scss">
.component-config-control-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .config-control-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
